<template>
  <div class="_instruction" @click="dialogTableVisible = true" curpagname="tgret435">
    <el-icon class="_icon" size="15"><QuestionFilled /></el-icon>
    {{ msgs.instructionText }}
    <!--  操作指南 -->
  </div>
  <el-dialog class="instruction_dialog" v-model="dialogTableVisible" :title="msgs.instructionTitle" width="800">
    <ul>
      <li>1：{{$t('goods_important_index.instruction_dialog_tips1')}}</li>
      <li>
        2：{{$t('goods_important_index.instruction_dialog_tips2')}}
      </li>
    </ul>
  </el-dialog>
</template>
<script setup lang='ts' >
import { ref, reactive, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const dialogTableVisible = ref<Boolean>(false);

const props = defineProps({
  msgs: {
    type: Object,
    default: () => {
      return {};
    }
  }
});
</script>
<style lang='scss' scoped>
._instruction {
  display: flex;
  align-items: center;
  justify-content: center;

  position: absolute;
  right: 20px;
  top: 20px;
  color: var(--el-color-primary);
  font-size: 12px;
  cursor: pointer;
  ._icon {
    margin-right: 3px;
  }
}
.instruction_dialog {
  ul {
    padding: 0px;
    li {
      list-style: none;
    }
  }
}
</style>
